<template>
  <div>
    <el-col :span="24">
      <!--一级-->
      <div class="rank">
        <el-row>
          <el-col :span="24">
            <div class="stair">
              <span>一级标签</span>
            </div>
          </el-col>
          <el-col :span="24">
            <draggable v-model="arr" :options="{group:'people'}" @start="drag=true" @end="drag=false">
              <div style="display: inline-block"  v-for="(arrAll,index) in arr">

                <CheckboxGroup v-model="fruit">
                  <Checkbox :label=arrAll.name>
                    <div class="frame">
                      <div class="ones" @click="but(index)" v-show="show2">
                        <span>{{arrAll.name}}</span>
                      </div>
                    </div>
                  </Checkbox>
                </CheckboxGroup>

              </div>
            </draggable>
          </el-col>
        </el-row>
      </div>
      <!--二级-->
      <div class="rank" v-show="isShow2">
        <el-row>
          <el-col :span="24">
            <div class="stair">
              <span>二级标签</span>
            </div>
          </el-col>
          <el-col :span="24">
            <draggable v-model="cityArr" :options="{group:'people'}" @start="drag=true" @end="drag=false">
              <div style="display: inline-block"  v-for="(cityArr,index) in cityArr">

                <CheckboxGroup v-model="fruit">
                  <Checkbox :label=cityArr.name>
                    <div class="frame">
                      <div class="ones" @click="but1(index)">
                        <span>{{cityArr.name}}</span>
                      </div>
                    </div>
                  </Checkbox>
                </CheckboxGroup>

              </div>
            </draggable>
          </el-col>
        </el-row>
      </div>
      <!--三级-->
      <div class="rank" v-show="isShow3">
        <el-row>
          <el-col :span="24">
            <div class="stair">
              <span>三级标签</span>
            </div>
          </el-col>
          <el-col :span="24">
            <draggable v-model="districtArr" :options="{group:'people'}" @start="drag=true" @end="drag=false">
              <div style="display: inline-block" v-for="(districtArr,index) in districtArr">

                <CheckboxGroup v-model="fruit">
                  <Checkbox :label=districtArr.name>
                    <div class="frame">
                      <div class="ones" @click="but2(index)">
                        <span>{{districtArr.name}}</span>
                      </div>
                    </div>
                  </Checkbox>
                </CheckboxGroup>

              </div>
            </draggable>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  import bus from '../bus';
  export default {
    components: {
      draggable
    },
    data() {
      return {
        show2: true,
        isRouterAlive: true,
        isShow2: false,
        isShow3: false,
        cityArr: [],
        districtArr: [],
        arr: [
          {
            name: '糖尿病筛查',
            sub: [
              {
                name: '症状体征',
                sub: [
                  {
                    name: '烦渴多饮'
                  },
                  {
                    name: '多尿'
                  },
                  {
                    name: '多食'
                  },
                  {
                    name: '不明原因的体重下降'
                  },
                  {
                    name: '乏力'
                  },
                  {
                    name: '肥胖'
                  },
                  {
                    name: '其他表现'
                  },
                ],
                type: 0
              },
              {
                name: '危险因素',
                sub: [
                  {
                    name: '年龄'
                  },
                  {
                    name: '40岁'
                  },
                  {
                    name: '糖尿病前期史'
                  },
                  {
                    name: '超重'
                  },
                  {
                    name: '肥胖'
                  },
                  {
                    name: '糖尿病家族史'
                  },
                  {
                    name: '妊娠期糖尿病史'
                  },
                  {
                    name: '高血压'
                  },
                  {
                    name: '动脉粥样硬化性心血管疾病患者'
                  },
                  {
                    name: '中心型肥胖'
                  },
                  {
                    name: '抑郁症'
                  },
                  {
                    name: '增加糖尿病发生风险的药物'
                  },
                  {
                    name: '肾功能不全'
                  },
                  {
                    name: '房颤'
                  },
                ],
                type: 0
              },
            ]
          },
          {
            name: '糖尿病诊断与评估',
            sub: [
              {
                name: '指标与检查',
                sub: [
                  {
                    name: '身高'
                  },
                  {
                    name: '体重'
                  },
                  {
                    name: 'BMI'
                  },
                  {
                    name: '腰围'
                  },
                  {
                    name: '血压'
                  },
                  {
                    name: '足背动脉搏动'
                  },
                  {
                    name: '空腹血糖'
                  },
                ],
                type: 0
              },
              {
                name: '糖尿病病因',
                sub: [
                  {
                    name: '环境因素'
                  },
                  {
                    name: '年龄'
                  },
                  {
                    name: '饮食'
                  },
                  {
                    name: '高血压'
                  },
                  {
                    name: '血脂异常'
                  },
                  {
                    name: '自身免疫系统缺陷'
                  },
                  {
                    name: '病毒感染'
                  }

                ],
                type: 0
              },
              {
                name: '糖尿病分型',
                sub: [
                  {
                    name: '1型糖尿病'
                  },
                  {
                    name: 'T1DM'
                  },
                  {
                    name: '自身免疫性疾病'
                  },
                  {
                    name: '成人隐匿性自身免疫糖尿病'
                  },
                  {
                    name: 'LADA'
                  },
                  {
                    name: '2型糖尿病'
                  },
                  {
                    name: 'T2DM'
                  },
                  {
                    name: '胰岛素抵抗'
                  },
                  {
                    name: '胰岛素分泌受损'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '糖尿病口服药治疗',
            sub: [
              {
                name: '药理机制',
                sub: [
                  {
                    name: '减少肝脏葡萄糖输出'
                  },
                  {
                    name: '改善外周胰岛素抵抗'
                  },
                  {
                    name: '增加肌肉葡萄糖摄取'
                  },
                  {
                    name: '磺脲类胰岛素促泌剂'
                  },
                  {
                    name: '非磺脲类胰岛素促泌剂'
                  },
                  {
                    name: '胰岛素增敏剂'
                  }
                ],
                type: 0
              },
              {
                name: '双胍类药物',
                sub: [
                  {
                    name: '二甲双胍药效'
                  },
                  {
                    name: '二甲双胍适应症'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '糖尿病胰岛素治疗',
            sub: [
              {
                name: '速效胰岛素类似物',
                sub: [
                  {
                    name: 'Apidra药效'
                  },
                  {
                    name: 'Apidra适应症'
                  },
                  {
                    name: 'Apidra不良反应'
                  },
                  {
                    name: 'Apidra禁忌症'
                  },
                  {
                    name: 'Apidra药物相互作用'
                  }
                ],
                type: 0
              },
              {
                name: '常规（短效）胰岛素',
                sub: [
                  {
                    name: '普通人胰岛素药效'
                  },
                  {
                    name: '普通人胰岛素适应症'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '糖尿病达标与治疗调整',
            sub: [
              {
                name: '糖尿病体征达标',
                sub: [
                  {
                    name: '体重达标'
                  },
                  {
                    name: '血糖达标'
                  }
                ],
                type: 0
              },
              {
                name: '一线用药选择',
                sub: [
                  {
                    name: '二甲双胍'
                  },
                  {
                    name: '二甲双胍'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '糖尿病并发症管理',
            sub: [
              {
                name: '急性并发症',
                sub: [
                  {
                    name: '酮症酸中毒'
                  },
                  {
                    name: 'DKA'
                  }
                ],
                type: 0
              },
              {
                name: '慢性并发症',
                sub: [
                  {
                    name: '慢性肾脏病'
                  },
                  {
                    name: 'CKD'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '患者随访和管理',
            sub: [
              {
                name: '营养预防',
                sub: [
                  {
                    name: '均衡膳食'
                  },
                  {
                    name: '能量'
                  }
                ],
                type: 0
              },
              {
                name: '运动预防',
                sub: [
                  {
                    name: '医生指导'
                  },
                  {
                    name: '减少静坐'
                  }
                ],
                type: 0
              },
              {
                name: '随访',
                sub: [
                  {
                    name: '频次'
                  },
                  {
                    name: '随访内容'
                  }
                ],
                type: 0
              },
            ]
          },
        ],
        fruit:[],
      };
    },
    methods: {
      but(index) {
        var obj = this.arr[index];
        this.cityArr = obj.sub;
        this.isShow2 = true;
        bus.$emit('fruit', this.fruit);
      },
      but1(index) {
        var obj = this.cityArr[index];
        this.districtArr = obj.sub;
        this.isShow3 = true;
        bus.$emit('fruit', this.fruit);
      },
      but2(index){
        bus.$emit('fruit', this.fruit);
      }
    }
  }
</script>

<style scoped>
  .rank {
    padding: 5px 0;
  }
  .stair > span {
    color: #5aaab4;
  }
  .frame {
    display: inline-block;
    white-space: nowrap;
    border-radius: 5px;
    margin: 3px 5px;
    cursor: pointer;
    border: 1px solid #909399;
    background-color: #909399;
    color: #fff;
  }
  .ones {
    text-align: center;
    padding: 5px 10px;
  }
  .frame:hover {
    background: #a6a9ad;
  }
  .ivu-checkbox-wrapper{
     margin-right: -3px;
  }
</style>

